<template>
	<view>
		<view class='picker_view'>
			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="picker">
					{{array[index]}}
					<image class='down_arrow' src='/static/add.png'></image>
				</view>
			</picker>
		</view>

		<view class='coins_view'>
			<view class='coins_title'>问题备注（选填）：</view>
			<input class='coins' type="text" v-model="remark" maxlength='50'></input>
		</view>

		<view class='coins_view'>
			<view class='coins_title'>请填写退款金额：</view>
			<input class='coins' type="number" v-model="coinsNum" maxlength='10'></input>
		</view>

		<view class='coins_view'>
			<view class='coins_title'>请输入设备编号(位于二维码下方的数字)</view>
			<input class='coins' type="number" v-model='deviceNo' maxlength='10'></input>
		</view>

		<view class='coins_view'>
			<view class='coins_title'>请输入您的手机号(选填)</view>
			<input class='coins' type="number" v-model='mobile' maxlength='11'></input>
		</view>

		<view class='img_view'>
			<view class='img_title'>请上传机器图片(选填）</view>
			<image class='img' :src='image' @click='uploadImg'></image>
		</view>

		<button class='submit' @click='submit'>提交</button>

		<view class="feedback-record" @click="toFeedbackRecord">反馈记录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeId: null,
				array: ['请选择反馈问题', '设备不启动', '其他'],
				index: 0,
				coinsNum: 0,
				deviceNo: null,
				mobile: null,
				image: '/static/add_photo.png',
				userId: 0,
				submitDisabled: false,
				remark: null
			};
		},
		methods: {
			bindPickerChange(e) {
				this.index = e.detail.value
			},
			uploadImg() {
				var self = this;
				wx.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						// self.getToken(res.tempFilePaths[0]);
					}
				})
			},
			submit() {
				if (this.index == 0) {
					uni.showToast({
						title: '请选择反馈问题',
						image: '/static/closeCopon.png',
						duration: 1000
					})
					return;
				} else if (this.coinsNum <= 0) {
					uni.showToast({
						title: '请填写退款金额',
						image: '/static/closeCopon.png',
						duration: 1000
					})
					return;
				} else if (this.deviceNo <= 0) {
					uni.showToast({
						title: '请输入设备编号',
						image: '/static/closeCopon.png',
						duration: 1000
					})
					return;
				} else {
					this.feedback();
				}
			},
			
			feedback: function () {
			    var self = this
			    self.submitDisabled = false
			    let imageUrl = self.data.image != '/img/add_photo.png' ? self.data.image : null
			    let phone = self.data.mobile > 0 ? self.data.mobile : null
			    let feedbackType = self.data.index == 4 ? 99 : self.data.index
			    util_request._post('/user/v1/feedback', {
			      feedbackType: feedbackType,
			      coins: self.data.coinsNum,
			      deviceNo: self.data.deviceNo,
			      phone: phone,
			      photos: imageUrl,
			      userId: self.data.userId,
			      remark: self.data.remark
			      }, function (res) {
			      if (res.data.ret_code * 1 == 0) {
			        uni.showToast({
			          title: '提交成功',
			          duration: 1000,
			          success: function (res) {
			            setTimeout(function () {
			              uni.navigateBack({
			                delta: 1
			              })
			            }, 1000)
			          }
			        })
			      } else {
			        self.submitDisabled = false
			        uni.showModal({
			          title: '提示',
			          content: res.data.ret_msg,
			          showCancel: false,
			        })
			      }
			    }, function (res) {
			      console.log(res)
			      self.submitDisabled = false
			    })
			  },
				
				  toFeedbackRecord() {
						this.$goPath(2,'/pages/mine/feedbackRecord')
				  }
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F3;
	}

	.picker_view {
		margin-top: 20rpx;
		background: white;
		width: 100%;
		height: 92rpx;
	}

	.picker {
		width: 100%;
		height: 92rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FF8A00;
		float: left;
		margin-left: 30rpx;
		margin-top: 24rpx;
	}

	.down_arrow {
		width: 20rpx;
		height: 13.2rpx;
		float: right;
		margin-right: 60rpx;
		margin-top: 16rpx;
	}

	.coins_view {
		margin-top: 20rpx;
		background: white;
		width: 100%;
		height: 160rpx;
	}

	.coins_title,
	.img_title {
		font-size: 28rpx;
		color: #9A9A9A;
		margin-left: 30rpx;
		padding-top: 24rpx;
	}

	.coins {
		height: 56rpx;
		margin-top: 12rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		font-size: 32rpx;
		color: #444444;
	}

	.img_view {
		margin-top: 20rpx;
		background: white;
		width: 100%;
		height: 300rpx;
	}

	.img {
		margin-top: 26rpx;
		margin-left: 30rpx;
		width: 180rpx;
		height: 180rpx;
	}

	.tip {
		text-align: center;
		margin-top: 10rpx;
	}

	.tip>view {
		font-size: 12px;
		color: #FE7606;
	}

	.tip>view>text {
		text-decoration: underline;
	}

	.submit {
		background: #FE7606;
		border-radius: 4px;
		width: 690rpx;
		height: 88rpx;
		margin-top: 20rpx;
		font-size: 18px;
		color: #FFFFFF;
	}

	.submit::after {
		border: none;
	}

	.feedback-record {
		text-align: center;
		font-size: 14px;
		color: #4da1ff;
		text-decoration: underline;
		margin: 40rpx 0;
	}
</style>